import { useAppDispatch } from '@/hooks';
import { Button, Form, Input, message, Modal, Space } from 'antd'
import React from 'react'
import { postHospitalSetAsync } from "@/store/slice/hosp";

type TModalProps = {
    isModalVisible: boolean,
    setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>,
    modalTitle: string
}
export default function HospitalModal(props: TModalProps) {
    const [form] = Form.useForm();
    const dispatch = useAppDispatch();
    return (
        <Modal title={props.modalTitle}
            // 底部内容，当不需要默认底部按钮时，可以设为 footer={null}
            footer={null}
            visible={props.isModalVisible}
            // 点击蒙层是否允许关闭
            maskClosable={false}
            // onOk={handleOk}
            // 点击遮罩层或右上角叉或取消按钮的回调
            onCancel={() => {
                props.setIsModalVisible(false);
            }}
        >
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                // initialValues={{ remember: true }}
                onFinish={async values => {
                    await dispatch(postHospitalSetAsync(values));
                    form.resetFields();// 清空表单
                    props.setIsModalVisible(false);
                    message.success("添加医院设置成功");


                }}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="医院名称"
                    name="hosname"
                    rules={[{
                        required: true,
                        min: 2,
                        max: 20,
                        message: '请输入医院名称!长度为2-15'
                    }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院编号"
                    name="hoscode"
                    rules={[{
                        required: true,
                        message: '请输入医院编号'
                    }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="API基础地址"
                    name="apiUrl"
                    rules={[{
                        required: true,
                        pattern: /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i,
                        message: '请输入正确的API基础地址'
                    }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                    rules={[{
                        required: true,
                        message: '请输入正确的联系人姓名'
                    }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人手机"
                    name="contactsPhone"
                    rules={[{
                        required: true,
                        pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                        message: '请输入正确的联系人手机'
                    }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="button" onClick={() => {
                            form.resetFields();// 清空表单
                        }}>
                            清空
                        </Button>
                    </Space>

                </Form.Item>
            </Form>
        </Modal>
    );

}
